<template>
    <div class="searchDialog">
        <div class="e-form">
            <el-form label-width="120px" :model="searchForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="验收日期">
                            <el-date-picker
                                v-model="searchForm.beginPlanDate"
                                type="date"
                                placeholder="请选择开始日期"
                                value-format="yyyy-MM-dd"
                                format="yyyy 年 MM 月 dd 日"
                                :picker-options="limitTimeStart"
                            >
                            </el-date-picker>
                            <span style="margin: 0 10px">至</span>
                            <el-date-picker
                                type="date"
                                v-model="searchForm.endPlanDate"
                                placeholder="请选择结束日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd"
                                :picker-options="limitTimeEnd"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构">
                            <el-input
                                placeholder="请选择机构"
                                v-model="orgName"
                                readonly
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-document-copy"
                                    @click="orgClick"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="加工单位">
                            <el-input
                                placeholder="请选择加工单位"
                                v-model="processingUnitName"
                                readonly
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-document-copy"
                                    @click="settleOrgClick"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="收料类型">
                            <el-checkbox
                                :indeterminate="isIndeterminateSL"
                                v-model="checkAllSL"
                                @change="handleCheckAllChangeSL"
                                style="margin: 0 60px 0 0"
                                >全选</el-checkbox
                            >
                            <div style="margin: 15px 0"></div>
                            <el-checkbox-group
                                v-model="searchForm.receivingType"
                                @change="handleCheckedChangeSL"
                            >
                                <el-checkbox
                                    v-for="item in receivingTypeList"
                                    :label="item.key"
                                    :key="item.key"
                                    >{{ item.label }}</el-checkbox
                                >
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否计加工费">
                            <el-checkbox
                                :indeterminate="isIndeterminateJGF"
                                v-model="checkAllJGF"
                                @change="handleCheckAllChangeJGF"
                                style="margin: 0 60px 0 0"
                                >全选</el-checkbox
                            >
                            <div style="margin: 15px 0"></div>
                            <el-checkbox-group
                                v-model="searchForm.isIncludingProcessingFee"
                                @change="handleCheckedChangeJGF"
                            >
                                <el-checkbox
                                    v-for="item in processingFeeList"
                                    :label="item.key"
                                    :key="item.key"
                                    >{{ item.label }}</el-checkbox
                                >
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <CheckAll
                                :chackdData.sync="stateList"
                                @checkdData="selectState"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div style="display: none">{{ localSearchData }}</div>
    </div>
</template>

<script>
import CheckAll from '@/components/common/checkAll'
import { selectDataClient } from '@/utils/common'
import { mapMutations } from 'vuex'
export default {
    components: {
        CheckAll
    },
    data () {
        return {
            searchForm: {
                beginPlanDate: '',
                endPlanDate: '',
                isIncludingProcessingFee: [],
                keyword: '',
                limit: 20,
                orgId: [localStorage.getItem('searchOrgId')],
                page: 1,
                processingUnitId: '',
                receivingType: [],
                states: []
            },
            jsdwData: {
                businessUnitTypes: [],
                keyword: '',
                limit: 10,
                orgId: '',
                outerTypes: [],
                page: 1,
                states: [],
                type: [1, 2],
                supplierTypes: [],
                subcontractorTypes: [],
                businessTypes: [],
                factoOutSourcerType: []
            },
            limitTimeStart: {
                disabledDate: this._limitTimeStart
            },
            limitTimeEnd: {
                disabledDate: this._limitTimeEnd
            },
            processingFeeList: [
                { key: 0, label: '否(自行加工)' },
                { key: 1, label: '是(外部加工)' },
            ],
            receivingTypeList: [
                { key: 0, label: '普通加工' },
                { key: 1, label: '砼加工' },
            ],
            isIndeterminateSL: true,
            checkAllSL: false,
            isIndeterminateJGF: true,
            checkAllJGF: false,
            orgName: '',
            processingUnitName: '',
            stateList: [
                { value: 0, label: '草稿' },
                { value: 1, label: '审核中' },
                { value: 2, label: '已审核' },
                { value: 5, label: '已作废' },
                { value: 9, label: '共享审核中' },
            ]
        }
    },
    created () {
        // this.stateList = this.$store.state.settlementManagement.ysState //状态
    },
    computed: {
        localSearchData () {
            // 默认设置搜索标志为false，则不进行搜索回调
            const searchForm = this.searchForm
            searchForm.searching = false
            this.setSearchData(searchForm)
            return searchForm
        }
    },
    methods: {
        ...mapMutations(['setSearchData']),
        // 选择机构
        orgClick () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getChildrenOrg', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '', // 接口参数(name为模拟参数)
                Title: '选择机构' // 标题
            }).then(val => {
                this.searchForm.orgId = val[0].orgId
                this.orgName = val[0].orgName
            })
        },
        // 选择结算单位
        settleOrgClick () {
            selectDataClient({
                SelectServiceToken: 'GeneralSelectOuter', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[]) // 这个是客户端给的,没有则为空
                InitParamsStr: JSON.stringify(this.jsdwData), // 接口参数(name为模拟参数)
                Title: '选择结算单位' // 标题
            }).then(res => {
                this.searchForm.processingUnitId = res[0].id
                this.processingUnitName = res[0].outerName
            })
        },
        // 获取已选择的状态
        selectState (val) {
            this.searchForm.states = val
        },
        // 日期选择后,禁用不可选的日期
        _limitTimeStart (time) {
            if (this.searchForm.endPlanDate) {
                return (
                    time.getTime() >
                    new Date(this.searchForm.endPlanDate).getTime()
                )
            } else {
                return time.getTime() < 0
            }
        },
        _limitTimeEnd (time) {
            if (this.searchForm.beginPlanDate) {
                return (
                    time.getTime() <
                    new Date(this.searchForm.beginPlanDate).getTime() - 8.64e7
                )
            } else {
                return time.getTime() < 0
            }
        },
        // 收料类型全选
        handleCheckAllChangeSL (val) {
            let checkAllIds = this.receivingTypeList.map(item => item.key)
            this.searchForm.receivingType = val ? checkAllIds : []
            this.isIndeterminateSL = false
        },
        // 收料类型单选选中
        handleCheckedChangeSL (value) {
            let checkedCount = value.length
            this.checkAllSL = checkedCount === this.receivingTypeList.length
            this.isIndeterminateSL =
                checkedCount > 0 && checkedCount < this.receivingTypeList.length
        },
        // 是否计加工费全选
        handleCheckAllChangeJGF (val) {
            let checkAllIds = this.processingFeeList.map(item => item.key)
            this.searchForm.isIncludingProcessingFee = val ? checkAllIds : []
            this.isIndeterminateJGF = false
        },
        // 是否计加工费单选选中
        handleCheckedChangeJGF (value) {
            let checkedCount = value.length
            this.checkAllJGF = checkedCount === this.processingFeeList.length
            this.isIndeterminateJGF =
                checkedCount > 0 && checkedCount < this.processingFeeList.length
        }
    }
}
</script>

<style lang="scss" scoped></style>
